<template>
    <div>
        <!-- 弹框 -->
        <el-dialog :title="info.isAdd ? '添加角色' : '编辑角色'" :visible.sync="info.isShow" :before-close="cancel">
            <el-form ref="roleForm" :model="roleForm" :rules="rules">
                <el-form-item label="角色名称" prop="rolename" :label-width="formLabelWidth">
                    <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <!-- 
                               data 展示数据	array 
                                node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
                                show-checkbox	节点是否可被选择
                                default-expand-all	是否默认展开所有节点
                                check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	boolean
                                 -->
                    <el-tree ref="tree" default-expand-all :data="menulist" show-checkbox node-key="id" :props="{
                        children: 'children',
                        label: 'title',
                    }" check-strictly>
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="roleForm.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { roleAdd, roleInfo, roleEdit } from '../../request/api'
import { mapActions, mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters({
            menulist: 'menu/getMenuList'
        })
    },
    props: ['info'],
    data() {
        return {
            formLabelWidth: "120px",
            roleForm: {
                rolename: "",
                menus: "", //角色权限 id数组'2,3,4' 字符串
                status: 1,
            },
            rules: {
                rolename: [
                    // required必须的 必传项
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
                ],
            },
        };
    },
    mounted() {
        if (this.menulist.length == 0) {
            this.getMenu();
        }
    },
    methods: {
        ...mapActions({
            getRole: 'role/changeRoleAction',
            getMenu: 'menu/changeMenuAction'
        }),
        loop(id) {
            roleInfo({ id }).then((res) => {
                this.roleForm = res.data.list
                this.$refs.tree.setCheckedKeys(
                    this.roleForm.menus ? this.roleForm.menus.split(",") : []
                );
                this.roleForm.id = id;
            })
        },
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        reset() {
            this.roleForm = {
                rolename: "",
                menus: "", //角色权限 id数组'2,3,4' 字符串
                status: 1,
            },
            this.$refs.roleForm.resetFields();
            //清空tree结构的选择状态
            this.$refs.tree.setCheckedKeys([]);
        },
        confirm() {

            this.$refs.roleForm.validate((flag) => {
                if (flag) {
                    console.log('验证成功');
                    this.roleForm.menus = this.$refs.tree.getCheckedKeys()
                        ? this.$refs.tree.getCheckedKeys().join(",")
                        : "";
                    if (this.info.isAdd) {
                        //  有isAdd就调用添加接口
                        roleAdd(this.roleForm).then((res) => {
                            if (res.data.code == 200) {
                                this.cancel();
                                this.getRole()
                            }
                        })
                    } else {
                        // 没有isAdd就调用编辑接口
                        roleEdit(this.roleForm).then((res) => {
                            if (res.data.code == 200) {
                                this.cancel();
                                this.getRole()
                            }
                        })
                    }
                } else {
                    console.log('验证失败');
                }
            })
        }
    }

};
</script>

<style  lang="" scoped>

</style>
